<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <PcHeader/>
    <el-row style="background:#fff;padding:16px 16px 0;margin: 114px 335px;">本地疫情
      <line-chart :chart-data="lineChartData"/>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from '../dashboard/PanelGroup'
import LineChart from '../dashboard/LineChart'
import BarChart from '../dashboard/BarChart'
import PcHeader from '../../components/myComponents/components/header/index'
import {mapState} from "vuex";
import variables from "@/assets/styles/variables.scss";

const lineChartData = {
  newVisitis: {
    actualData: [120, 82, 91, 154, 162, 140, 145, 186],
    xData: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07', '01-08'],
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    BarChart,
    PcHeader,
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      // 添加时间时间范围
      daterangeAddTime: [],
      // 查询参数
      queryParamsActua: {
        addInfection: null,
        addTime: null
      },
      queryParams: {},
      loading: false,
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.queryParamsActua.params = {};
      if (null != this.daterangeAddTime && '' != this.daterangeAddTime) {
        this.queryParamsActua.params["beginAddTime"] = this.daterangeAddTime[0];
        this.queryParamsActua.params["endAddTime"] = this.daterangeAddTime[1];
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.loading = true;
      let that = this;
      var t = setTimeout(function () {
        that.loading = false;
      }, 1000);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeAddTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
